<template>
  <a-spin :spinning='confirmLoading'>
    <j-form-container :disabled='formDisabled'>
      <a-form-model ref='form' :model='model' :rules='validatorRules' slot='detail'>
        <a-row>
<!--          <a-col :span='24'>-->
<!--            <a-form-model-item label='用户id' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='userId'>-->
<!--              <a-input v-model='model.userId' placeholder='请输入用户id'></a-input>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span='24'>
            <a-form-model-item label='标题' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='title'>
              <a-input v-model='model.title' placeholder='请输入标题'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='文章内容' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='content'>
              <a-textarea v-model='model.content' rows='4' placeholder='请输入文章内容' />
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='文章摘要' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='summary'>
              <a-input v-model='model.summary' placeholder='请输入文章摘要'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='所属分类id，一个文章一个分类' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='categoryId'>
              <j-dict-select-tag type='list' v-model='model.categoryId' dictCode='blog_category,id,id'
                                 placeholder='请选择所属分类id，一个文章一个分类' />
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='博客标签' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='tags'>
              <a-select
                mode='multiple'
                style='width: 100%'
                placeholder='请选择所属标签id，一个文章多个标签'
                @change='handleChangeSelect'
                v-model='model.tags'
              >
                <a-select-option v-for='item in tagList' :key='item.id' :value='item.id'>
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='内容图' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='coverImg'>
              <a-input v-model='model.coverImg' placeholder='请输入内容图'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='封面图' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='topImg'>
              <a-input v-model='model.topImg' placeholder='请输入封面图'></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { httpAction, postAction } from '@/api/manage'

export default {
  name: 'BlogArticleForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    id: 1
  },
  data() {
    return {
      // model:{
      // },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: "/blog/blogArticle/add",
        edit: '/blog/blogArticle/edit',
        queryById: '/blog/blogArticle/blogDetail',
        getTag: '/tag/blogTag/tagList'
      },
      tagList: [],
      form: this.$form.createForm(this)
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    model() {
      return this.$store.state.article.articleInfo
    }
  },
  created() {
    this.getTag()
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleChangeSelect(value){
    },
    add() {
      this.$store.commit('clearStateArticle');
      this.edit(null);
      // this.edit(this.modelDefault)
    },
    edit(record) {
      this.visible = true;
    },
    getTag() {
      httpAction(this.url.getTag, null, 'get').then(
        res => {
          this.tagList = res.data
        }
      )
    },
    submitForm () {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
            method = 'post';
          }
          httpAction(httpurl,this.model,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }

      })
    },
    getFormFieldValue(field){
      return this.form.getFieldValue(field)
    },
  }
}
</script>